<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="sf" uri="http://www.springside.org.cn/tags/form"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<script src="${ctx}/static/js/xheditor/1.1.14/xheditor-1.1.14-zh-cn.min.js" type="text/javascript"></script>
<style>
<!--
.xheDialog label {
	display: inline;
}
.form-horizontal .control-label {
	width: 80px;
}
.form-horizontal .controls {
	margin-left: 20px;
}
-->
</style>

<script type="text/javascript">
	//图片预览
	function previewImage(x){
		$('#preview').attr("src", "${ctx}/" + $(x).find("option:selected").val());
	}
	
	$(document).ready(function() {
		//初始化xhEditor编辑器插件  
		$('#content').xheditor({
			tools : 'full',
			skin : 'default',
			upImgUrl : "${ctx}/upload/image",
			upImgExt : "jpg,jpeg,png,gif",
			html5Upload : false,
			onUpload : insertUpload
		});
		
		//图片上传回调函数  
		function insertUpload(arrMsg) {
			//xheditor返回的arrMsg是一个Object数组
			var msg = arrMsg[0];
			
			//(1)其中url插入到编辑器,这样xheditor才能正常显示图片
			var url = msg.url;
			$("#content").append(url);

			//以下步骤不是必须的
			//(2)将attachment_id保存到checkbox中，发表文章时根据这些attachment_id去更新图片的post_id
			var id = msg.id;
			$("#imagesDiv").append("<input type='checkbox' name='attachments' checked='checked' onclick='return false;' value='"+id+"''/><br>");
			
			//(3)图片的名字放到下拉列表,用户从下拉列表 中选择图片做为Post的主题图片
			var localname = msg.localname;
			var urlWithoutHttp = url.substring(url.indexOf("/upload")+1);
			$("#topicImageUrl").append("<option value='"+urlWithoutHttp+"'>" + localname + "</option>");
		}
		
		
		//聚焦第一个输入框
		$("#name").focus();
		//为inputForm注册validate函数
		$("#inputForm").validate();
		
	});
</script>
<div class="row-fluid">
	<div class="span12">
		<sf:form id="inputForm" commandName="post" cssClass="form-horizontal"
			action="create">
			<div class="control-group">
				<label class="control-label" for="title">标题:</label>
				<div class="controls">
					<sf:input path="title" cssClass="input-xxlarge required" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="categoryId">分类:</label>
				<div class="controls">
					<sf:select path="categoryId" items="${categoryList }" itemValue="id" itemLabel="name"/>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="content">内容:</label>
				<div class="controls">
					<sf:textarea path="content" rows="16" cssClass="span10"/>
				</div>
				<div class="controls" id="imagesDiv" style="display:none">
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="topicImageUrl">主题图片:</label>
				<div class="controls">
					<sf:select path="topicImageUrl" onchange='previewImage(this)' items="${post.attachments }" itemValue="url" itemLabel="originalName">
					</sf:select>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="hit">图片预览:</label>
				<div class="controls">
					<img id="preview" src="" border="0" width="200" height="200" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="hit">点击次数:</label>
				<div class="controls">
					<sf:input path="hit" cssClass="input-small required" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="ding">顶:</label>
				<div class="controls">
					<sf:input path="ding" cssClass="input-mini required" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="cai">踩:</label>
				<div class="controls">
					<sf:input path="cai" cssClass="input-mini required" />
				</div>
			</div>

			<div class="control-group">
				<label class="control-label" for="source">来源:</label>
				<div class="controls">
					<sf:input path="source" cssClass="input-large" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="btnSave">&nbsp;</label>
				<div class="controls">
					<input id="btnSave" class="btn btn-primary" type="submit"
						value="Save"> <input id="btnCancel" class="btn"
						type="button" value="Cancel" onclick="history.back()">
				</div>
			</div>
		</sf:form>

	</div>
	<!-- span12 end -->

</div>
<!-- row-fluid end -->
